<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>请选择你的兴趣爱好
            <input type="checkbox" :checked="checkedAll" @change="setCheckedAll"> 全选
        </h3>
        <h3>
          <div v-for="item in list"> <input type="checkbox" :value="item.id" v-model="item.checked" />
            <!-- v-model在checkbox中可以控制选中的状态 -->
            {{item.msg}}
        </div> 
           
        </h3>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            checkedAll: false,//控制全选的状态
            list: [{ id: 1, msg: "篮球", checked: false }, { id: 2, msg: "打游戏", checked: false }, { id: 3, msg: "看小说", checked: false }, { id: 4, msg: "睡觉", checked: false }]
        },
        methods:{
            setCheckedAll(e){
                // alert(e.target.checked);
               // this.checkedAll = e.target.checked;  //为什么取消了 效果还是正确的
                this.list.forEach(item=>{
                    item.checked = e.target.checked;
                })
            }
        },
        watch:{
            // list(){ 只能监听数组一层  不能监听数组里面的对象的变化
            //     console.log("a");
            // }
            // checkedAll(flag){//全选的值  把全选的状态给 list中每一个对象的checked
            //     // console.log(flag);
            //     //list中的每一个元素 都是对象 对象引用类型  引用类型 直接操作就可以了
            //     this.list.forEach(item=>{
            //         item.checked =flag;
            //     })
            //     //全选为false  下面每一个都会是false
            // },
            list:{
                deep:true,//表示深度监听
                handler(newList){//这里处理业务
                    //当集合里面的对象的属性 发生改变的以后  就会触发handler函数
                    //判断是否都选中了  都选中了(list中的对象checked都是true) 全选就选中
                    this.checkedAll =   newList.every(item=>item.checked);
                    //只要有一个取消的时候 this.checkedAll 都会是false
                }
                
             }
    
    }
    })

</script>

</html>